<template>
  <div>
    <el-card class="box-card center-card" style="margin-top:20px">
      <div class="text item">
        <el-button :loading="loading" type="success" class="center-btn" @click="downloadToServe">下载成绩表至服务器</el-button>
        <i class="el-icon-right" style="padding: 0 20px;"></i>
        <el-button :loading="loading" type="primary" class="center-btn" @click="exportExcel">导出考生成绩表</el-button>
      </div>
    </el-card>
    <download-to-serve :dialogVisibleFu="dialogVisibleFu" @closeDialog="closeDialog"></download-to-serve>
  </div>
</template>

<script>
  import Cookies from "js-cookie";
  import {exportScoreExcel, queryExportScoreExcelProcess, getExcelZipExsit} from "@/api/toolsystem/grade";
  import { downLoadZip } from "@/utils/zipdownload";
  import downloadToServe from "@/components/ToolSystem/Grade/downloadToServe"
  export default {
    name: "getGradeXiaoKao",
    components:{
      downloadToServe
    },
    data(){
      return {
        loading: false,
        percentage: 0,// 上传进度
        timer: null,// 定时器
        dialogVisibleFu: false,// 控制弹框的显示与隐藏
      }
    },
    watch:{
      percentage(value){
        console.log(value)
        if(this.percentage==100){
          this.loading = false;
          clearInterval(this.timer)
          setTimeout(()=>{
            this.$root.globalDialog = false
          },2000)
          Cookies.set("tool_system_grade_download_true", 1)
          this.msgSuccess('下载成功')
        }
      }
    },
    created(){
      this.queryProcess()
    },
    methods:{
      // 关闭弹框
      closeDialog(val, type){
        this.dialogVisibleFu = val
        if(type){
          this.downloadToServeQuest(type)
        }
      },
      // 下载成绩表至服务器按钮
      downloadToServe(){
        this.$confirm('确认要下载成绩表至服务器?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.dialogVisibleFu = true
          })
          .catch(()=>{
            this.msgInfo('取消操作')
          })
      },
      // 下载成绩表至服务器请求
      downloadToServeQuest(type){
        this.loading = true
        this.percentage = 0
        this.$root.percentage = 0
        this.$root.globalDialog = true
        this.timer=setInterval(()=>{
          this.queryProcess()
        },10000)
        exportScoreExcel(type)
      },
      // 获取下载成绩表的进度
      queryProcess(){
        queryExportScoreExcelProcess().then(response => {
          if (response.code != 200) {
            return;
          };
          this.percentage = Number(response.data);
          this.$root.percentage = Number(response.data);
        }).catch(error=>{
          console.log(error)
        })
      },
      // 判断是否存在压缩包(是否已经下载过成绩表至服务器)
      async getExcelZipExsit(){
        let status = await getExcelZipExsit().then(response => {
          if (response.code != 200) {
            return false;
          };
          if(response.data){
            Cookies.set("tool_system_grade_download_true", 1)
            return true;
          }
          return false;
        }).catch(error=>{
          return false
        })
        return status;
      },
      // 导出学生成绩表
      async exportExcel(){
        if(Cookies.get("tool_system_grade_download_true")){
          if(Cookies.get("tool_system_grade_download_true") != 1){
            return this.msgInfo('请先下载成绩表至服务器')
          }
        }else{
          let status = await this.getExcelZipExsit()
          if(!status){
            return this.msgInfo('请先下载成绩表至服务器')
          }
        }

        this.$confirm('确认要导出考生成绩表?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            downLoadZip('/after-exam-score/exportScoreExcel/getExcelZip', '学生成绩表');
          })
          .catch(()=>{
            this.msgInfo('取消操作')
          })
      },
    }
  }
</script>

<style scoped>
.el-progress.excel{
  margin-top: 20px;
}
</style>
